// 登录
var loginBtn = document.querySelector('header>section>div.member>div')
var loginDialog = document.querySelector('section.login')
var dialogClose = document.querySelector('section.login p.close>i.icon-close')
loginBtn.onclick = function(){
    loginDialog.style.visibility = 'visible';
}
dialogClose.onclick = function(){
    loginDialog.style.visibility = 'hidden';
}

// 拖拽
var loginDialogItem = document.querySelector('section.login div.item')
var loginBlueArea = document.querySelector('section.login div.item div.menu')
loginBlueArea.onmousedown = function(evt){
    var oldE = evt || window.event;
    document.onmousemove = function(evt){
        var e = evt || window.event;
        var left = e.clientX - oldE.offsetX;
        var top = e.clientY - oldE.offsetY;
        var maxTop = (window.innerHeight || document.documentElement.clientHeight) - loginDialogItem.offsetHeight;
        var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - loginDialogItem.offsetWidth;
        if(left<0){left=0}
        if(top<0){top=0}
        if(left>maxLeft){left=maxLeft}
        if(top>maxTop){top=maxTop}
        loginDialogItem.style.position = 'absolute';
        loginDialogItem.style.left = left+'px';
        loginDialogItem.style.top = top+'px';
    }
    document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

//5秒后重新发送验证码
var captchaBtn = document.querySelector('section.login div.form button.captcha');
var captchaDialog = document.querySelector('section.captcha');
var captchaDialogClose = document.querySelector('section.captcha h2 i.icon-close');
var num = 5;
var t;
captchaBtn.onclick = function(){
        captchaDialog.style.visibility = 'visible';
        var imgDrag = document.querySelector('section.captcha div.check img:nth-of-type(2)');
        var btnDrag = document.querySelector('section.captcha div.drag div.btn');
        var divDrag = document.querySelector('section.captcha div.drag');
        btnDrag.onmousedown = function(evt){
            var oldE = evt || window.event;
            document.onmousemove = function(evt){
                var e = evt || window.event;
                var left = e.clientX - (captchaDialog.offsetLeft-captchaDialog.offsetWidth/2)-btnDrag.offsetWidth;
                var leftMin = 0;
                var leftMax = divDrag.offsetWidth-btnDrag.offsetWidth;
                if(left<0){left=0}
                if(left>leftMax){left=leftMax}
                btnDrag.style.left = left +'px';
                imgDrag.style.left = left +'px';
                
            }
            
            document.onmouseup = function(){
                document.onmousemove = null;
                // document.onmouseup = null;
                var value = parseInt(imgDrag.style.left);
                if(value>=260 && value<=265){
                    captchaDialog.style.visibility = 'hidden';
                    // value=0;
                    if(t){return}
                    captchaBtn.disabled=true;
                    captchaBtn.innerText = num +'秒后重新发送';
                    t = setInterval(function(){
                        // num--;
                        // captchaBtn.innerText = num +'秒后重新发送';
                        if(num<=1){
                            captchaBtn.innerText = '重新发送';
                            clearInterval(t);
                            num = 5;
                            t = null;
                            captchaBtn.disabled=false;
                            return
                        }
                        num--;
                        captchaBtn.innerText = num +'秒后重新发送';
                    },1000) 
                }
                btnDrag.style.left = '0px';
                imgDrag.style.left = '0px';  
            }

        }
        captchaDialogClose.onclick = function(){
            captchaDialog.style.visibility = 'hidden';
        }
        // return;
        // if(t){return}
        // captchaBtn.innerText = num +'秒后重新发送';
        // t = setInterval(function(){
        //     // num--;
        //     // captchaBtn.innerText = num +'秒后重新发送';
        //     if(num<=1){
        //         captchaBtn.innerText = '重新发送';
        //         clearInterval(t);
        //         num = 5;
        //         t = null;
        //         return
        //     }
        //     num--;
        //     captchaBtn.innerText = num +'秒后重新发送';
        // },1000) 
       
}

//表单验证
var mobileIpt = document.querySelector('section.login div.form input.mobile');
var passwordIpt = document.querySelector('section.login div.form input.password');
var submitObj = document.querySelector('section.login div.form button.submit');
var msgObj1 = document.querySelector('section.login div.form p:nth-of-type(3)');
var msgObj2 = document.querySelector('section.login div.form p:nth-of-type(4)');
var formObj = document.querySelector('section.login div.form');
submitObj.onclick = function(){
    var isOk = 0;
    if(mobileIpt.value=='' || mobileIpt.value.length!==11 || !Number(mobileIpt.value)){
        msgObj1.innerText = '手机格式有误!';
    }
    else{
        msgObj1.innerText ='';
        isOk++;
    }
    if(passwordIpt.value=='' || passwordIpt.value.length!==4 || !Number(passwordIpt.value)){
        msgObj2.innerText = '验证码必须是4位数字!';
    }
    else{
        msgObj2.innerText ='';
        isOk++;
    }
    if(isOk===2){
        alert('提交成功')
        loginDialog.style.visibility = 'hidden';
    }
}

//热门歌单滚动显示
setInterval(function(){
    var ulObj = document.querySelector('section.hot>ul');
    var marginLeft = parseInt(ulObj.style.marginLeft);
    marginLeft--;
    if(marginLeft<=-(ulObj.offsetWidth/3*2)+15){
        ulObj.style.marginLeft = '0px';
    }
    else{
        ulObj.style.marginLeft = marginLeft+'px';
    }
    
},10)


//顶部加载进度条
var loadNum = 0;
var over = false;
var loadT = setInterval(function(){
    if(loadNum>=95 && !over){
        return
    }
    loadNum++;
    var nprogress = document.querySelector('.nprogress')
    if(nprogress){
        nprogress.style.width = loadNum + '%';
    }
    else{
        nprogress = document.createElement('div');
        nprogress.className = 'nprogress';
        nprogress.style.position = 'fixed';
        nprogress.style.width = loadNum + '%';
        nprogress.style.height = '5px';
        nprogress.style.top = '0px';
        nprogress.style.background = '#ccc';
        document.body.appendChild(nprogress);
        var nprogressRadius = document.createElement('div');
        nprogressRadius.className = 'nprogressRadius';
        document.body.appendChild(nprogressRadius);
    }
    if(loadNum>=100){
        loadNum=0;
        clearInterval(loadT);
        document.body.removeChild(nprogress);
        // document.body.removeChild(nprogressRadius); //为什么不可以这样移除
        document.body.removeChild(document.querySelector('.nprogressRadius'));
    }
},10)
// window.onload = function(){
//     over = true;
// }
window.addEventListener('load', function(){
    over = true;
})


//轮播图
var swiper = [
    {x:-64, s:.83, z:1},
    {x:140, s:1,   z:2},
    {x:338, s:.83, z:1},
    {x:960, s:.83, z:1},
    {x:960, s:.83, z:1},
    {x:960, s:.83, z:1}
]
function foreachStyle(){
    swiperSlides.forEach(function(item,i){
        item.style.transform = 'translateX('+swiper[i].x+'px) scale('+swiper[i].s+')';
        item.style.zIndex = swiper[i].z; 
    });
}
var swiperSlides = document.querySelectorAll('section.swiper div.swiper-wrapper div.swiper-slide');
// foreachStyle();   //后面又写了一次遍历，这里可以省略 225
var swiperPrev = document.querySelector('div.swiper-prev');
var swiperNext = document.querySelector('div.swiper-next');
swiperPrev.onclick = function(){
    var temp = swiper.pop();
    swiper.unshift(temp);
    foreachStyle();
}
swiperNext.onclick = function(){
    var temp = swiper.shift();
    swiper.push(temp);
    foreachStyle();
}
swiperSlides.forEach(function(item,i){
    item.style.transform = 'translateX('+swiper[i].x+'px) scale('+swiper[i].s+')';
    item.style.zIndex = swiper[i].z; 
    item.onclick = function(){
        if(item.style.transform.includes(-64)){
            swiperPrev.onclick();
        }
        if(item.style.transform.includes(338)){
            swiperNext.onclick();
        }
    }
});
// document.onclick = function(evt){
//     var e = evt || window.evt;
//     console.log(e.target);
// }























